<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Genius</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<!--导航部分-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#"><img src="img/logo.png" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse  col-md-7" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">HOME<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">ABOUT US</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">SERVICES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">COURSES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">PRICING</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!--身体部分-->
<main>
    <!--banner部分-->
    <div class="banner">
        <div class="container">
            <h1>EDUCATION GENIUS</h1>
            <p>
                Lorem ipsum dolor sit amet,consecteretur adipisicing
                elitincidunt eius magni provident
            </p>
            <a href="">Read More</a>
        </div>
    </div>
    <!--盒子一-->
    <div class="courses text-center">
        <div class="container">
            <h2>Our Courses</h2>
            <p>
                Lorem ipsum dolor sit amet,consectetur
                adipisicing elit.Dolores quae porro consequatur
                aliquam,incidunt eius magni provident,doloribus omnis
                minus minus tenporibus per ferendis nesciunt quam
                repellendus nulla nemo ipsum odit corrupti consequuntur pcssimes
            </p>
            <div class="row text-left">
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-3">
                            <img src="img/a-11.png" alt="">
                        </div>
                        <div class="col-md-9">
                            <h3>Mobile Dev</h3>
                            <p>
                                Backed by some of the biggest names
                                in the ndustry,Frefox OS is an open
                                Platform that fosters greater
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-3">
                            <img src="img/a-11.png" alt="">
                        </div>
                        <div class="col-md-9">
                            <h3>Communication</h3>
                            <p>
                                Backed by some of the biggest names
                                in the ndustry,Frefox OS is an open
                                Platform that fosters greater
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-3">
                            <img src="img/a-11.png" alt="">
                        </div>
                        <div class="col-md-9">
                            <h3>Computers</h3>
                            <p>
                                Backed by some of the biggest names
                                in the ndustry,Frefox OS is an open
                                Platform that fosters greater
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-3">
                            <img src="img/a-11.png" alt="">
                        </div>
                        <div class="col-md-9">
                            <h3>Finance</h3>
                            <p>
                                Backed by some of the biggest names
                                in the ndustry,Frefox OS is an open
                                Platform that fosters greater
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-3">
                            <img src="img/a-11.png" alt="">
                        </div>
                        <div class="col-md-9">
                            <h3>Maths</h3>
                            <p>
                                Backed by some of the biggest names
                                in the ndustry,Frefox OS is an open
                                Platform that fosters greater
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-3">
                            <img src="img/a-11.png" alt="">
                        </div>
                        <div class="col-md-9">
                            <h3>Davelopment</h3>
                            <p>
                                Backed by some of the biggest names
                                in the ndustry,Frefox OS is an open
                                Platform that fosters greater
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--盒子二-->
    <div class="studentd text-center">
        <div class="container">
            <h2>Our Students</h2>
            <p>
                Lorem ipsum dolor sit amet,consectetur
                adipisicing elit.Dolores quae porro consequatur
                aliquam,incidunt eius magni provident,doloribus omnis
                minus minus tenporibus per ferendis nesciunt quam
                repellendus nulla nemo ipsum odit corrupti consequuntur pcssimes
            </p>
            <div class="row text-left">
                <div class="col-md-6">
                    <img src="img/sds.png" alt="">
                </div>
                <div class="col-md-6">
                    <ul>
                        <li>
                            <p>
                                Lorem ipsum dolor sit amet,consectetur
                                adipisicing elit.Dolores quae porro consequatur
                                aliquam,incidunt eius magni provident,doloribus omnis
                                minus minus tenporibus per ferendis nesciunt quam
                                Lorem ipsum dolor sit amet,consectetur
                                adipisicing elit.Dolores quae porro consequatur
                                aliquam,incidunt eius magni provident,doloribus omnis
                            </p>
                        </li>
                        <li>
                            <p>
                                Lorem ipsum dolor sit arnet,consectetur adipisicing elit.adipisicing sit arnet,
                                consectetur adipisicing elit.Atque sed.quidem quis praesentium,mdeserunt
                            </p>
                        </li>
                        <li><i></i><a href="">Lorem ipsum enimdolor sit amet</a></li>
                        <li><i></i><a href="">Explicabo deleniti neque aliquid</a></li>
                        <li><i></i><a href="">Consectetur adipisicing elit</a></li>
                        <li><i></i><a href="">Lorem ipsum dolor sit amet</a></li>
                        <li><i></i><a href="">Quo issimos molest quibusdam temporibus</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--盒子三-->
    <div class="events text-center">
        <div class="container">
            <h2>Our Events</h2>
            <p>
                Lorem ipsumdolor sit amel,consec adipisicing elit.Dolores quae porro consequatur
                aliquam,incidunt eius magni provident ,doloribus omnis minus temporibud
                perferendis nesciunt quam repellendus nulla nemo ipsum odit corrupti consequunturpossimus.
            </p>
            <div class="row text-left">
                <div class="col-md-4">
                    <div class="inner">
                        <img src="img/b-11.png" alt="">
                        <a href="">Fed</a>
                        <p>LOREM PSUM DCLOR SIT AMET,CONSECTETUR ADIPIS</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="inner">
                        <img src="img/b-12.png" alt="">
                        <a href="">March</a>
                        <p>LOREM PSUM DCLOR SIT AMET,CONSECTETUR ADIPISI IF</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="inner">
                        <img src="img/b-11.png" alt="">
                        <a href="">April</a>
                        <p>DCLOR SIT AMET,CONSECTETUR ADIPIS</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--盒子四-->
    <div class="placement text-center">
        <div class="container">
            <h2>Campus Placement</h2>
            <p>
                Lorem ipsumdolor sit amel,consec adipisicing elit.Dolores quae porro consequatur
                aliquam,incidunt eius magni provident ,doloribus omnis minus temporibud
                perferendis nesciunt quam repellendus nulla nemo ipsum odit corrupti consequunturpossimus.
            </p>
            <div class="row">
                <div class="col-md-2">
                    <img src="img/c-11.png" alt="">
                </div>
                <div class="col-md-2">
                    <img src="img/c-12.png" alt="">
                </div>
                <div class="col-md-2">
                    <img src="img/c-13.png" alt="">
                </div>
                <div class="col-md-2">
                    <img src="img/c-11.png" alt="">
                </div>
                <div class="col-md-2">
                    <img src="img/c-12.png" alt="">
                </div>
                <div class="col-md-2">
                    <img src="img/c-13.png" alt="">
                </div>
            </div>
        </div>
    </div>
</main>
<!--footer部分-->
<footer>
    <div class="top">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <ul>
                        <li><h5>Our Contact</h5></li>
                        <li><a href="">Target company inc</a></li>
                        <li><a href="">jc Main Road,Near Silnile tower</a></li>
                        <li><a href="">Pin-21542 NewYork Us.</a></li>
                        <li><a href="">(123)456-789 - 1255-12584</a></li>
                        <li><a href="">email@domainname.com</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <ul>
                        <li>
                            <h5>Quick Links</h5>
                        </li>
                        <li><a href="">Latest Events</a></li>
                        <li><a href="">Terms and conditions</a></li>
                        <li><a href="">Privacy policy</a></li>
                        <li><a href="">Career</a></li>
                        <li><a href="">Contace us</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <ul>
                        <li><h5>Latest posts</h5></li>
                        <li><a href="">Lorem ipsum dolor sit amet</a></li>
                        <li><a href="">consectetur adipiscing elit</a></li>
                        <li><a href="">Pellentesque et pulcinar enim. Quisque at tempor ligula</a></li>
                        <li><a href="">Natus error sit voluptatem accusantium doloremque</a></li>

                    </ul>
                </div>
                <div class="col-md-3">
                    <ul>
                        <li><h5>Recent News</h5></li>
                        <li><a href="">Lorem ipsum dolor sit amet</a></li>
                        <li><a href="">consectetur adipiscing elit</a></li>
                        <li><a href="">Pellentesque et pulcinar enim. Quisque at tempor ligula</a></li>
                        <li><a href="">Natus error sit voluptatem accusantium doloremque</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="container">
            <div class="row">
                <div class="col-md-6 text-left">
                    <p>Copyright©.Company name All rights reserved.</p>
                </div>
                <div class="col-md-6 text-right">
                    <a href=""><img src="img/d-11.png" alt=""></a>
                    <a href=""><img src="img/d-12.png" alt=""></a>
                    <a href=""><img src="img/d-13.png" alt=""></a>
                    <a href=""><img src="img/d-14.png" alt=""></a>
                    <a href=""><img src="img/d-15.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>
</footer>


<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>